<template>
  <div class="addorder-tabs">
    <Card>
      <Tabs value="auto">
        <TabPane label="自动生成订单" name="auto">
          <div>
            <span>生成数量：</span>
            <InputNumber :min="1" v-model="sum"></InputNumber>
            <Button :loading="loading" class="add-button" type="primary" @click="autoAddOrder">随机生成</Button>
          </div>
          <div>
            <div v-for="i in orderList" :key="i.index">{{ i }}</div>
          </div>
        </TabPane>
        <TabPane label="手动生成订单" name="manual">
          <div class="m-content">
            <Form ref="JForm" :model="formData">
              <FormItem prop="goods" label="选择商品">
                <Select v-model="formData.goodsId" placeholder="请选择商品" :filterable="true" :clearable="true">
                  <Option v-for="item in goodsData" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
              </FormItem>
            </Form>
          </div>
        </TabPane>
      </Tabs>
    </Card>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      sum: 1,   // 随机生成订单数
      orderList: [],
      loading: false,  // 按钮是否加载中
      formData: {},   // 添加订单的数据
      goodsData: [],   // 商品列表
    }
  },
  mounted () {
    this._getGoodsOfSelect()
  },
  methods: {
    // 随机生成订单
    autoAddOrder () {
      this.loading = true
      for (let i = 0; i < this.sum; i++) {
        this._autoAddOrder()
      }
      this.loading = false
    },
    async _autoAddOrder () {
      const url = 'autoaddorder'
      const res = await this.GET_DATA({
        dataUrl: url,
        username: this.$store.state.userModule.user.username
      })
      if (res) {
        if (res.code === '0000') {
          this.$Message.success('操作成功')
          // this.orderList.push(res.data)
        }
      }
    },
    // 获取商品数据
    async _getGoodsOfSelect () {
      const url = 'getgoodsofselect'
      const res = await this.GET_DATA({
        dataUrl: url
      })
      if (res) {
        this.$nextTick(() => {
          this.goodsData = res.data
        })
      }
    },
    ...mapActions({
      GET_DATA: 'GET_DATA'
    })
  }
}
</script>

<style lang="scss" scoped>
.m-content {
  height: 500px;
}
.addorder-tabs {
  padding-left: 20px;
}
.add-button {
  margin-left: 20px;
}
</style>